<template>
  <Container :breadcrumb="breadcrumb">
    <a-row slot="container"
           class="p-3">
      <a-col :span="7">
        <a-tree showLine
                :defaultExpandedKeys="['0-0-0']"
                @select="treeSelect">
          <a-tree-node title="parent 1"
                       key="0-0">
            <a-tree-node title="parent 1-0"
                         key="0-0-0">
              <a-tree-node title="leaf"
                           key="0-0-0-0" />
              <a-tree-node title="leaf"
                           key="0-0-0-1" />
              <a-tree-node title="leaf"
                           key="0-0-0-2" />
            </a-tree-node>
            <a-tree-node title="parent 1-1"
                         key="0-0-1">
              <a-tree-node title="leaf"
                           key="0-0-1-0" />
            </a-tree-node>
            <a-tree-node title="parent 1-2"
                         key="0-0-2">
              <a-tree-node title="leaf"
                           key="0-0-2-0" />
              <a-tree-node title="leaf"
                           key="0-0-2-1" />
            </a-tree-node>
          </a-tree-node>
        </a-tree>
      </a-col>
      <a-col :span="1">
        <a-divider type="vertical"
                   class="height-16" />
      </a-col>
      <a-col :span="16">
        <a-tabs defaultActiveKey="1"
                @change="tabChange">
          <a-tab-pane tab="Tab 1"
                      key="1">
            Content of Tab Pane 1
          </a-tab-pane>
          <a-tab-pane tab="Tab 2"
                      key="2">
            Content of Tab Pane 2
          </a-tab-pane>
          <a-tab-pane tab="Tab 3"
                      key="3">
            Content of Tab Pane 3
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </Container>
</template>

<script>

/**
 * @description Quota Management Component
 */

import Container from '@/components/common/Container'

const breadcrumbConfig = [
  {
    path: '/dashboard',
    breadcrumbName: "i18n_common_home_page"
  },
  {
    path: '/service-define',
    breadcrumbName: "i18n_menu_operation_label"
  },
  {
    path: '',
    breadcrumbName: "i18n_menu_quota_label"
  }
]

export default {
  data() {
    return {
      breadcrumb: breadcrumbConfig
    }
  },
  methods: {    treeSelect() { },
    tabChange() { }
  },
  components: {
    Container
  }
}
</script>
